<template>
    <div class="index-header-container">
        <div class="title">
            <span style="font-family: black;font-size: 20px;font-weight: bold;">考勤信息管理系统</span>
        </div>
        <div class="UserDrapdown">
            <el-dropdown>
                <el-avatar :size="30" :src="circleUrl"></el-avatar>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>{{userId}}</el-dropdown-item>
                    <el-dropdown-item @click.native="handleChangePass">修改密码</el-dropdown-item>
                    <el-dropdown-item @click.native="handleLogout">注销</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { Logout } from '@/api/api'
export default {
  data () {
    return {
      userId: this.$store.state.userId,
      circleUrl: this.$store.state.imageUrl
    }
  },
  methods: {
    handleLogout () {
      sessionStorage.clear()
      Logout().then(res => {
        // console.log(res.data)
      })
      this.$router.push('/')
      this.$router.go()
    },
    handleChangePass () {
      this.$router.push('/changePass')
    }
  }
}
</script>

<style lang="scss" scoped>
.index-header-container{
    display: flex;
    justify-content: space-between;
}

.el-avatar{
    margin-top: 15px;
}
</style>
